<template>
	<view class="container">
		<!-- 商品图片轮播 -->
		<swiper class="product-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(image, index) in product.images" :key="index">
				<image class="swiper-image" :src="image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 商品基本信息 -->
		<view class="product-info">
			<view class="price-section">
				<text class="current-price">¥{{product.currentPrice}}</text>
				<text class="original-price" v-if="product.originalPrice">¥{{product.originalPrice}}</text>
				<view class="discount-tag" v-if="product.discount">限时{{product.discount}}折</view>
			</view>
			<view class="product-title">{{product.title}}</view>
			<view class="product-subtitle">{{product.subtitle}}</view>
			<view class="sales-info">
				<text>销量 {{product.sales}}件</text>
				<text>评价 {{product.reviews}}条</text>
			</view>
		</view>

		<!-- 规格选择 -->
		<view class="spec-section" @click="showSpecModal">
			<text class="section-title">规格</text>
			<view class="selected-spec">
				<text>{{selectedSpec.name}}</text>
				<view class="arrow">></view>
			</view>
		</view>

		<!-- 数量选择 -->
		<view class="quantity-section">
			<text class="section-title">数量</text>
			<view class="quantity-selector">
				<button class="quantity-btn minus" @click="decreaseQuantity">-</button>
				<text class="quantity-text">{{quantity}}</text>
				<button class="quantity-btn plus" @click="increaseQuantity">+</button>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail-section">
			<view class="section-header">
				<text class="section-title">商品详情</text>
			</view>
			<view class="detail-content">
				<image v-for="(image, index) in product.detailImages" :key="index" :src="image" mode="widthFix" class="detail-image"></image>
			</view>
		</view>

		<!-- 用户评价 -->
		<view class="review-section">
			<view class="section-header">
				<text class="section-title">用户评价</text>
				<text class="view-more">查看更多 ></text>
			</view>
			<view class="review-item" v-for="(review, index) in reviews" :key="index">
				<view class="review-header">
					<image class="user-avatar" :src="review.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<text class="username">{{review.username}}</text>
						<view class="rating">
							<text class="star" v-for="i in 5" :key="i">⭐</text>
						</view>
					</view>
					<text class="review-time">{{review.time}}</text>
				</view>
				<view class="review-content">{{review.content}}</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<view class="left-actions">
				<view class="action-item" @click="toggleFavorite">
					<view class="action-icon" :class="{ active: isFavorite }">❤️</view>
					<text class="action-text">收藏</text>
				</view>
				<view class="action-item" @click="goToCart">
					<view class="action-icon">🛒</view>
					<text class="action-text">购物车</text>
				</view>
			</view>
			<view class="right-actions">
				<button class="add-to-cart-btn" @click="addToCart">加入购物车</button>
				<button class="buy-now-btn" @click="buyNow">立即购买</button>
			</view>
		</view>

		<!-- 规格选择弹窗 -->
		<view class="spec-modal" v-if="showSpec" @click="hideSpecModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<image class="modal-product-image" :src="product.images[0]" mode="aspectFill"></image>
					<view class="modal-product-info">
						<text class="modal-price">¥{{selectedSpec.price}}</text>
						<text class="modal-title">已选：{{selectedSpec.name}}</text>
					</view>
					<view class="close-btn" @click="hideSpecModal">×</view>
				</view>
				<view class="spec-options">
					<view class="spec-group" v-for="(group, index) in product.specs" :key="index">
						<text class="group-title">{{group.title}}</text>
						<view class="spec-items">
							<view 
								class="spec-item" 
								v-for="(item, itemIndex) in group.items" 
								:key="itemIndex"
								:class="{ active: selectedSpec.id === item.id }"
								@click="selectSpec(item)"
							>
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="modal-actions">
					<button class="confirm-btn" @click="confirmSpec">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSpec: false,
				quantity: 1,
				isFavorite: false,
				selectedSpec: {
					id: 1,
					name: '2.5kg/袋',
					price: '48.8'
				},
				product: {
					images: [
						'/static/apple1.png',
						'/static/apple2.png',
						'/static/apple3.png'
					],
					currentPrice: '48.8',
					originalPrice: '68.8',
					discount: 7,
					title: '云南鲜甜青苹果 新鲜水果',
					subtitle: '果园直供 脆甜多汁 营养丰富',
					sales: 1234,
					reviews: 89,
					specs: [
						{
							title: '规格',
							items: [
								{ id: 1, name: '2.5kg/袋', price: '48.8' },
								{ id: 2, name: '5kg/袋', price: '88.8' },
								{ id: 3, name: '10kg/箱', price: '158.8' }
							]
						}
					],
					detailImages: [
						'/static/detail1.png',
						'/static/detail2.png'
					]
				},
				reviews: [
					{
						avatar: '/static/avatar1.png',
						username: '用户***123',
						rating: 5,
						content: '苹果很新鲜，口感很好，包装也很完整，会继续购买的！',
						time: '2024-01-12'
					},
					{
						avatar: '/static/avatar2.png',
						username: '用户***456',
						rating: 4,
						content: '物流很快，苹果质量不错，就是有点小，下次买大规格的。',
						time: '2024-01-10'
					}
				]
			}
		},
		methods: {
			showSpecModal() {
				this.showSpec = true;
			},
			hideSpecModal() {
				this.showSpec = false;
			},
			selectSpec(spec) {
				this.selectedSpec = spec;
			},
			confirmSpec() {
				this.hideSpecModal();
			},
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			increaseQuantity() {
				this.quantity++;
			},
			toggleFavorite() {
				this.isFavorite = !this.isFavorite;
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/car/car'
				});
			},
			addToCart() {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				});
			},
			buyNow() {
				uni.navigateTo({
					url: '/pages/order/confirm'
				});
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 商品轮播图 */
.product-swiper {
	height: 500rpx;
}

.swiper-image {
	width: 100%;
	height: 100%;
}

/* 商品信息 */
.product-info {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.price-section {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.current-price {
	font-size: 48rpx;
	color: #ff4757;
	font-weight: bold;
}

.original-price {
	font-size: 28rpx;
	color: #999;
	text-decoration: line-through;
}

.discount-tag {
	background-color: #ff4757;
	color: white;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
}

.product-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 15rpx;
	line-height: 1.4;
}

.product-subtitle {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 20rpx;
}

.sales-info {
	display: flex;
	gap: 30rpx;
	font-size: 24rpx;
	color: #999;
}

/* 规格和数量选择 */
.spec-section, .quantity-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title {
	font-size: 28rpx;
	color: #333;
}

.selected-spec {
	display: flex;
	align-items: center;
	gap: 15rpx;
	color: #666;
}

.arrow {
	font-size: 24rpx;
	color: #999;
}

.quantity-selector {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.quantity-btn {
	width: 60rpx;
	height: 60rpx;
	border: 1rpx solid #ddd;
	background-color: #fff;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.quantity-text {
	font-size: 28rpx;
	color: #333;
	min-width: 80rpx;
	text-align: center;
}

/* 商品详情 */
.detail-section {
	background-color: #fff;
	margin-bottom: 20rpx;
}

.section-header {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.detail-content {
	padding: 30rpx;
}

.detail-image {
	width: 100%;
	margin-bottom: 20rpx;
}

/* 用户评价 */
.review-section {
	background-color: #fff;
	margin-bottom: 20rpx;
}

.review-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.review-item:last-child {
	border-bottom: none;
}

.review-header {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.user-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}

.user-info {
	flex: 1;
}

.username {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.rating {
	display: flex;
	gap: 5rpx;
}

.star {
	font-size: 20rpx;
}

.review-time {
	font-size: 22rpx;
	color: #999;
}

.review-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

.view-more {
	color: #ff6b35;
	font-size: 24rpx;
}

/* 底部操作栏 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.left-actions {
	display: flex;
	gap: 40rpx;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.action-icon {
	font-size: 40rpx;
}

.action-icon.active {
	color: #ff4757;
}

.action-text {
	font-size: 20rpx;
	color: #666;
}

.right-actions {
	display: flex;
	gap: 20rpx;
}

.add-to-cart-btn, .buy-now-btn {
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	border: none;
}

.add-to-cart-btn {
	background-color: #fff5f0;
	color: #ff6b35;
	border: 1rpx solid #ff6b35;
}

.buy-now-btn {
	background-color: #ff6b35;
	color: white;
}

/* 规格选择弹窗 */
.spec-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
}

.modal-content {
	background-color: #fff;
	width: 100%;
	border-radius: 20rpx 20rpx 0 0;
	max-height: 80vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
}

.modal-product-info {
	flex: 1;
}

.modal-price {
	font-size: 36rpx;
	color: #ff4757;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.modal-title {
	font-size: 26rpx;
	color: #666;
}

.close-btn {
	font-size: 40rpx;
	color: #999;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spec-options {
	padding: 30rpx;
}

.spec-group {
	margin-bottom: 30rpx;
}

.group-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.spec-items {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.spec-item {
	padding: 15rpx 25rpx;
	border: 1rpx solid #ddd;
	border-radius: 25rpx;
	font-size: 26rpx;
	color: #666;
}

.spec-item.active {
	background-color: #fff5f0;
	color: #ff6b35;
	border-color: #ff6b35;
}

.modal-actions {
	padding: 30rpx;
	border-top: 1rpx solid #f0f0f0;
}

.confirm-btn {
	width: 100%;
	background-color: #ff6b35;
	color: white;
	border: none;
	padding: 25rpx;
	border-radius: 25rpx;
	font-size: 32rpx;
}
</style>